<template>
  <div>
    <header class="base-header">
      <i class="icon" @tap='back'></i>
      <h1>填写订单</h1>
    </header>
    <article class="address-line" @tap='chooesAddress()' v-if="hasAddress">
      <div class="user-name">
        <img src="/public/images/userAddress.png" class="icon">
        <span>{{ data.address.receiverName }}&nbsp;{{ data.address.receiverPhone }}</span>
        <i v-if="data.address.isDefult">默认</i>
      </div>
      <div class="address">
        <i class="icon"></i>
        <img src="/public/images/address.png" class="icon">
        <span >{{ data.address.province + data.address.city + data.address.region + data.address.detailAddress}}</span>
      </div>
      <i class="link-icon mui-icon mui-icon-arrowright"></i>
    </article>
    <div class="none-address" v-if="!hasAddress">
      <div class="addAddress"  @tap='chooesAddress()'>
        选择收货地址
      </div>
      <img src="../../public/images/border.png" class="bottom-border">
    </div>
    <article class="main" v-if="isFormCart">
        <div class="item" v-for="(row, item) in data.goodsList">
            <div class="store-line">
                <i></i>
                <h2>{{item.userName}}</h2>
            </div>
            <div class="goods-line" v-for="(index, goods) in item.items">
                <div class="details">
                    <img :src="goods.imageUrl" class="goods-line-img">
                    <div class="title">
                        <h3>{{goods.goodsName}}</h3>
                        <div class="goodsnum" style="bottom:55px;">
                            &times;{{goods.goodsNum}}
                        </div>
                        <div style="color:#333;position:absolute;bottom:33px;font-size:14px;">消耗积分</div>
                        <div class="integral" style="bottom:15px;">
                            {{ goods.goodsNum * goods.point}}积分
                            
                        </div>
                        
                    </div>
                </div>
            </div>
        </div>
    </article>
    <article class="main" v-if="!isFormCart">
      <div class="item">
            <div class="goods-line" >
                <div class="details">
                    <img :src="data.detail.imageUrl" class="goods-line-img">
                    <div class="title">
                        <h3>{{detail.goodsName}}</h3>
                        <div class="integral">
                            {{detail.point}}积分
                            
                        </div>
                        <div class="goodsnum">
                            &times;{{detail.num}}
                        </div>
                    </div>
                </div>
            </div>
        </div>    
    </article>
    <footer>
      <div class="count">
        <div class="all-integral">
          合计&nbsp;<span>{{data.settlement}}</span>积分
        </div>
        <div class="settlement" @tap="settle()">
          提交订单
        </div>
      </div>
      <div class="base-manu" style="background-color:#ffffff" ;>
        <a class="manu index-link" href="../../mallHome/index.html">
          首页
        </a>
        <a class="manu cart-link active">
          购物车
          <!-- <b class="shop1">6</b> -->
        </a>
        <a class="manu user-link" href="../../we/index.html">
          我的
        </a>
      </div>
    </footer>
  </div>
</template>
<script>
  require('../../public/images/address.png');
  require('../../public/images/userAddress.png');
  import store from '../shopping-store';

  export default {
    data: function () {    // 组件的数据格式
      return {
        data: store.state,
        isFormCart: true,
        detail: {}
      };
    },
    computed: {
      hasAddress: function () {
        var str = (this.data.address.province + this.data.address.city + this.data.address.region + this.data.address.detailAddress) || 'none';
        var res = false;
        if (str.length > 0 && str !== 'none') {
          res = true;
        }
        return res;
      }
    },
    created: function () {
      this.init();
    },
    ready: function () {
    },
    watch: {
      $route: function (to) {
        var str = to.params.data;
        if (!str) {
          return false;
        }
        this.init();
      }
    },
    methods: {
      init: function () {
        var str = this.$route.params.data;
        store.state.paramsData = str;
        var goods = JSON.parse(str);
        var AddressId = goods['AddressId'];
        store.getAddressId(AddressId);
        if (goods['detail']) {
          this.isFormCart = false;
          this.detail = goods['detail'];
          store.getSettlement(str);
          store.getDetail(this.detail.id);
        } else {
          this.isFormCart = true;
          var idstr = JSON.stringify(goods['settlementData']);
          var ids = idstr.substring(1, idstr.length - 1);
          store.getSettlementData(str);
          store.getGoodsList(ids);
        }
      },
      settle: function () {
        var self = this;
        if (self.data.addressId === -1) {
          mui.alert('收货地址不能为空');
          return false;
        }
        var jsonData = JSON.parse(self.$route.params.data);
        mui.confirm('兑换成功将扣除' + jsonData.settlement + '积分', '是否确认兑换?', ['取消', '确认兑换'], function (e) {
          if (e.index === 1) {
            if (self.isFormCart) {
              store.settle();
            } else {
              store.settleNow(self.detail);
            }
          };
        }, 'div');
      },
      chooesAddress: function () {
        var self = this;
        window.location.href = '/we/index.html#!/address/' + self.$route.params.data;
      },
      back: function () {
        window.history.go(-1);
      }
    }
  };
</script>
